// Schema:
// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
var h2020 = [
    [0.19220792695579997, 0.03439510271840631, 0.008923013073251712, 0.0, 0.04176177630213737, 0.00918240298817182, 0.003372068893961403, 0.0, 0.0, 0.04907657190288441, 0.24211454658642872, 0.11937123884623366, 0.11205644324548661, 0.32081344677318946, 0.1927785847686242, 0.21664245694127413, 0.28470637061631043, 0.7204814276820917, 1.0, 0.08399045445113094, 0.03024486407968458, 0.1031334301722349, 0.09680431624818427, 0.14671093587881304]
];
var h2019 = [
    [0.015211850907932463, 0.015450780503345014, 0.030821917808219176, 0.003106084740363173, 0.0006371455877668047, 0.0, 0.0, 0.0, 0.007008601465434852, 0.1824625676967187, 0.2196559413826059, 0.3916852500796432, 0.1435966868429436, 0.06411277476903472, 0.33665179993628547, 0.4384358075820325, 1.0, 0.47252309652755653, 0.5869703727301688, 0.32510353615801213, 0.25995539980885635, 0.21137304874163745, 0.11062440267601147, 0.03257406817457789]
];
var lineStyle = {
    normal: {
        width: 1,
        opacity: 0.5
    }
};

var hour2020option = {
    backgroundColor: '#161627',
    title: {
        text: 'commit - 雷达图',
        left: 'center',
        textStyle: {
            color: '#eee'
        }
    },
    legend: {
        bottom: 5,
        data: ['2020', '2019'],
        itemGap: 20,
        textStyle: {
            color: '#fff',
            fontSize: 14
        },
        selectedMode: 'multiple',
        selected: {
            '2020': true,
            '2019': true
        }
    },
    // visualMap: {
    //     show: true,
    //     min: 0,
    //     max: 20,
    //     dimension: 6,
    //     inRange: {
    //         colorLightness: [0.5, 0.8]
    //     }
    // },
    radar: {
        indicator: [{
            'name': "0",
            'max': 1
        }, {
            'name': 1,
            'max': 1
        }, {
            'name': 2,
            'max': 1
        }, {
            'name': 3,
            'max': 1
        }, {
            'name': 4,
            'max': 1
        }, {
            'name': 5,
            'max': 1
        }, {
            'name': 6,
            'max': 1
        }, {
            'name': 7,
            'max': 1
        }, {
            'name': 8,
            'max': 1
        }, {
            'name': 9,
            'max': 1
        }, {
            'name': 10,
            'max': 1
        }, {
            'name': 11,
            'max': 1
        }, {
            'name': 12,
            'max': 1
        }, {
            'name': 13,
            'max': 1
        }, {
            'name': 14,
            'max': 1
        }, {
            'name': 15,
            'max': 1
        }, {
            'name': 16,
            'max': 1
        }, {
            'name': 17,
            'max': 1
        }, {
            'name': 18,
            'max': 1
        }, {
            'name': 19,
            'max': 1
        }, {
            'name': 20,
            'max': 1
        }, {
            'name': 21,
            'max': 1
        }, {
            'name': 22,
            'max': 1
        }, {
            'name': 23,
            'max': 1
        }],
        shape: 'circle',
        splitNumber: 5,
        name: {
            textStyle: {
                color: 'rgb(238, 197, 102)'
            }
        },
        splitLine: {
            lineStyle: {
                color: [
                    'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
                    'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
                    'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
                ].reverse()
            }
        },
        splitArea: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(238, 197, 102, 0.5)'
            }
        }
    },
    series: [{
        name: '2020',
        type: 'radar',
        lineStyle: lineStyle,
        data: h2020,
        symbol: 'none',
        itemStyle: {
            color: '#F9713C'
        },
        areaStyle: {
            opacity: 0.5
        }
    }, {
        name: '2019',
        type: 'radar',
        lineStyle: lineStyle,
        data: h2019,
        symbol: 'none',
        itemStyle: {
            color: '#B3E4A1'
        },
        areaStyle: {
            opacity: 0.1
        }
    }]
};

var chartDom = document.getElementById('2020hour');
var myChart = echarts.init(chartDom, 'dark');
hour2020option && myChart.setOption(hour2020option);